<template>
	<view class="boxSty">
		<view class="swiperBoxSty">
			<swiper class="swiper" circular>
				<swiper-item>
					<view class="swiper-item uni-bg-red">
						<image src="@/static/img/swiper.png" mode="" class="swiperSty"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="infoBox">
			<view class="sendGoodSty">
				<view class="titlSty h-100">
					<view class="title" :class="{activeSty: index == 0}" @click="index = 0">
						<view class="bigRadius">
							<p>{{$t('大件运输')}}</p>
							<!-- <image src="@/static/icon/radius.png" mode=""></image> -->
						</view>
						<p v-if="index == 0" class="lineSty"></p>
					</view>
					<view class="title" :class="{activeStySmall: index == 1}"  @click="index = 1">
						{{$t('小件快递')}}
						<p v-if="index == 1" class="lineSty"></p>
					</view>
				</view>
				<view class="cityBox mt-30">
					<view class="citySty">
						<citySelect style="width: 100%;" :text="fullBeginAddress" @confirm="e => {
							fullBeginAddress = e.column3.label;
							fullBeginAddressKey = e.column3.value;
						}" 
						/>
					</view>
					<image src="@/static/icon/change.png" mode=""></image>
					<view class="citySty text-right">
						<citySelect
							style="width: 100%;"
							:text="fullEndAddress" 
							@confirm="e => {
								fullEndAddress = e.column3.label;
								fullEndAddressKey = e.column3.value;
							}" 
						/>
					</view>
				</view>
				<view class="goodBtnSty">
					<view class="searchBtn" @click="filterBtn">
						{{$t('货源搜索')}}
					</view>
					<view class="sendBtn">
						{{$t('立即发货')}}
					</view>
				</view>
			</view>
			<view class="evenly h-200 bg-white m-16 rounded-26">
				<view v-for="(item, index) in iconList" class="center flex-col posti" @click="goFun(index)">
					<view class="">
						<image :src="item.image" mode="" class="w-70 h-58"></image>
						<p class="text-555 fz22 mt-24">{{item.text}}</p>
					</view>
					<u-badge class="badgeSty" v-if="index == 1" max="99" :value="valueNum" shape="horn" absolute="true"></u-badge>
				</view>
			</view>
			<view class="h-280 bg-white m-16 mt-16 memberCenter">
				<view class="between">
					<view class="showDiscounts">
						<p class="fz28 font-bold text-010">{{$t('会员中心')}}</p>
						<view class="discountSy">
							<view class="timeShow">
								{{$t('限时优惠')}}
							</view>
							<p>47:34:23</p>
						</view>
					</view>
					<view class="moreSty">
						更多会员福利 >
					</view>
				</view>
				<image src="@/static/img/memberImg.png" mode="" class="memberSty"></image> 
			</view>
			<view class="toSeeSty">
			<view class="seeBox">
				<view class="mt-30">
					<span class="blackSty">{{$t('翻译官')}}·</span>
					<span class="blueSty">{{$t('解决沟通')}}</span>
				</view>
				<p class="darkSty">3000+{{$t('翻译为您全面服务')}}</p>
				<view class="seeBtnSty">
					<view class="seeBtn">
						{{$t('去看看')}}
					</view>
					<image src="@/static/img/translate.png" mode="" class="imgSty"></image>
				</view>
			</view>
			<view class="seeBox">
				<view class="mt-30">
					<span class="blackSty">{{$t('优质货主')}}·</span>
					<span class="blueSty">{{$t('专注外贸')}}</span>
				</view>
				<p class="darkSty">{{$t('优质货源，持续供应')}}</p>
				<view class="seeBtnSty">
					<view class="seeBtn">
						{{$t('去看看')}}
					</view>
					<image src="@/static/img/earth.png" mode="" class="imgSty"></image>
				</view>
			</view>
			
		</view>
		<view class="hotBox">
			<view class="between">
				<p class="hotKind">
					{{$t('热门展会')}}
					<span></span>
				</p>
				<p class="allKind">全部展会 > </p>
			</view>
			<view class="flex-start watchSty">
				<image src="@/static/img/showImage1.png" mode="" class="w-135 h-175 ml-24 mt-26"></image>
				<view class=" mt-26 ml-18">
					<p class="text-010 fz28 font-bold">{{$t('哈尔滨')}}·2025{{$t('中国')}}博览会展厅</p>
					<p class="text-555 fz22 mt-18">{{$t('哈尔滨')}}·南岗区·{{$t('中')}}央大街135号</p>
					<p class="text-555 fz20 mt-18">2025.03.28 - 2025.03.30 </p>
					<view class="ingSty">
						{{$t('正在进行中')}}
					</view>
				</view>
				<view class="goSty">
					<p>{{$t('前往观看')}}</p>
					<image src="@/static/img/lightning.png" mode="" class="w-20 h-35 ml-5 mr-5"></image>
					<p>Go</p>
				</view>
			</view>
			<view class="flex-start watchSty mt-28 pb-38">
				<image src="@/static/img/showImage2.png" mode="" class="w-135 h-175 ml-24 mt-26"></image>
				<view class=" mt-26 ml-18">
					<p class="text-010 fz28 font-bold">{{$t('哈尔滨')}}·2025{{$t('中国')}}博览会展厅</p>
					<p class="text-555 fz22 mt-18">{{$t('哈尔滨')}}·南岗区·{{$t('中')}}央大街135号</p>
					<p class="text-555 fz20 mt-18">2025.03.28 - 2025.03.30 </p>
					<view class="readySty">
						{{$t('预热')}}
					</view>
				</view>
				<view class="readybegin">
					<p>{{$t('未开始')}}</p>
				</view>
			</view>
		</view>
		<view class="cardListBox">
			<view v-for="(item, index) in cardList" class="cardSty" :class="{activeCard: current == index}" @click="changeList(index)">
				<p>{{item}}</p>
				<p v-if="current == index" class="ativeLine"></p>
			</view>
		</view>
		<view class="content-inner">
			<div class="content-time">
				<p class="time">{{$t('发布时间')}}：<span class="text-010 font-bold">{{allInfo.create_at || ''}}</span></p>
				<p class="kind">{{allInfo.goods_type == 0 ? $t('大件') : $t('小件')}} - {{allInfo.demandValue || ''}} </p>
			</div>
			<div class="content-top">
				<div class="colorSty">
					<div class="between items-start">
						<div class="flex route-item"> 
							 <div style="text-align: center;">{{allInfo.departure.area_info.name || ''}}</div>
						</div>
						<view class="line mt-15">
							<view v-if="allInfo.transfer_count !== 0"  class="text">
								{{$t('途经')}}{{allInfo.transfer_count}}
							</view>
							<image class="ico" src="/static/img/ico_line2.png" mode="widthFix"></image>
						</view>
						<div class="flex route-item">
							<div style="text-align: center;">{{allInfo.reach.area_info.name || ''}}</div>
						</div>
					</div>
					<div class="between items-start mt-10">
						<div class="address">
							<image class="ico" src="/static/img/chain.png" mode="widthFix"></image>
							<p>{{allInfo.departure.area_info.mergename || ''}}</p>
						</div>
						<div></div>
						<div  class="address">
							<image class="ico" src="/static/img/chain.png" mode="widthFix"></image>
							<p>{{allInfo.reach.area_info.mergename || ''}}</p>
						</div>
					</div>
				 </div>
				</div>
				<view class="content-info">
					<span class="info-title">{{$t('货物信息')}}: </span>
					<span class="info-content">{{[allInfo.goods_info.title, allInfo.goods_info.goods_weight+"吨", allInfo.goods_info.goods_volume+'立方米', allInfo.goods_info.package.title].filter(item => item).join('/') || ''}}</span>
				</view>
				<p class="lineCardSty"></p>
				<view class="flex-end mb-16">
					<view class="btnBottomSty">
						{{$t('在线联系')}}
					</view>
					<view class="btnBottomSty mr-24 ml-30">
						{{$t('打电话')}}
					</view>
				</view>
		</view>
		<view class="content-inner" style="margin-bottom: 120rpx;">
			<div class="content-time">
				<p class="time">{{$t('接单时间')}}：{{allInfo.create_at || ''}} </p>
				<p class="kind">{{allInfo.goods_type == 0 ? $t('大件') : $t('小件')}} - {{allInfo.demandValue || ''}} </p>
			</div>
			<div class="content-top">
				<div class="colorSty">
					<div class="between items-start">
						<div class="flex route-item"> 
							 <div style="text-align: center;">{{allInfo.departure.area_info.name || ''}}</div>
						</div>
						<view class="line mt-15">
							<view v-if="allInfo.transfer_count !== 0"  class="text">
								{{$t('途经')}}{{allInfo.transfer_count}}
							</view>
							<image class="ico" src="/static/img/ico_line2.png" mode="widthFix"></image>
						</view>
						<div class="flex route-item">
							<div style="text-align: center;">{{allInfo.reach.area_info.name || ''}}</div>
						</div>
					</div>
					<div class="between items-start mt-10">
						<div class="address">
							<image class="ico" src="/static/img/chain.png" mode="widthFix"></image>
							<p>{{allInfo.departure.area_info.mergename || ''}}</p>
						</div>
						<div></div>
						<div  class="address">
							<image class="ico" src="/static/img/chain.png" mode="widthFix"></image>
							<p>{{allInfo.reach.area_info.mergename || ''}}</p>
						</div>
					</div>
				 </div>
				</div>
				<view class="content-info">
					<span class="info-title">{{$t('货物信息')}}: </span>
					<span class="info-content">{{[allInfo.goods_info.title, allInfo.goods_info.goods_weight+"吨", allInfo.goods_info.goods_volume+'立方米', allInfo.goods_info.package.title].filter(item => item).join('/') || ''}}</span>
				</view>
				<p class="lineCardSty"></p>
				<view class="flex-end mb-16">
					<view class="btnBottomSty">
						{{$t('在线联系')}}
					</view>
					<view class="btnBottomSty mr-24 ml-30">
						{{$t('打电话')}}
					</view>
				</view>
		</view>
		
		</view>
		<u-tabbar
		  :value="value1"
		  :fixed="true"
		  :placeholder="true"
		  :border="false"
		  :safeAreaInsetBottom="true"
		  activeColor="#278AFF"
		  inactiveColor="#8C8C8C"
		  class="tabbarSty"
		>
		  <u-tabbar-item :text="$t('首页')" icon="home" @click="click1"></u-tabbar-item>
		  <!-- <u-tabbar-item :text="$t('商城')" icon="bag" @click="click1"></u-tabbar-item> -->
		  <u-tabbar-item :text="$t('工作台')" icon="grid" @click="click1"></u-tabbar-item>
		  <u-tabbar-item :text="$t('通讯录')" icon="chat" @click="click1"></u-tabbar-item>
		  <u-tabbar-item :text="$t('我的')" icon="account" @click="click1"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import regionsPicker from './components/regions.vue';
	import { regionList } from '@/utils/region.js'
	import citySelect from "./components/citySelect.vue"
	export default {
		components: {citySelect},
		data() {
			return {
				value1: 0,
				index: 0,
				current: 0,
				fullBeginAddress: '',
				fullBeginAddressKey: '',
				fullEndAddress: '',
				fullEndAddressKey: '',
				allInfo: {
					create_at: '2024-12-21 10:35',
					goods_type: 0,
					demandValue: this.$t('运输、通关'),
					departure:{
						area_info: {
							name: this.$t('哈尔滨'),
							mergename: this.$t('黑龙江省')
						}
					},
					reach:{
						area_info: {
							name: this.$t('莫斯科'),
							mergename: this.$t('诺克萨斯州')
						}
					},
					transfer_count: 2,
					goods_info:{
						title:this.$t('办公用品'),
						goods_weight: ' 2',
						goods_volume: '4',
						package:{
							title: this.$t('木架卷')
						}
					}
				},
				cardList: [this.$t('最新货源'), this.$t('活跃货主'), this.$t('空闲车源'), this.$t('平台成交')],
				valueNum: 15,
				type: 'warning',
				iconList: [
					{
						text: this.$t('车源信息'),
						image: require("@/static/icon/carIcon.png")
					},
					{
						text: this.$t('货源信息'),
						image: require("@/static/icon/boxIcon.png")
					},
					{
						text: this.$t('企业排行'),
						image: require("@/static/icon/cupIcon.png")
					},
					{
						text: this.$t('专业代办'),
						image: require("@/static/icon/card.png")
					},
					{
						text: this.$t('保险业务'),
						image: require("@/static/icon/protect.png")
					}
				]
			}
		},
		methods: {
			changeList(index) {
				this.current = index
			},
			filterBtn() {
				const params = {
					departure_area: this.fullBeginAddressKey || '',
					reach_area: this.fullEndAddressKey || '',
					goods_type: this.index
				}
				uni.setStorageSync("filterList", params)
				uni.navigateTo({
					url:"/pages/sourceInformation/index"
				})
			},
			goFun(index) {
				if (index == '2' || index == '3' || index == '4') {
					uni.$u.toast('敬请期待')
				} else if (index == '1') {
					uni.navigateTo({
						url:'/pages/sourceInformation/index'
					})
				}
			},
			click1(e) {
				this.value1 = e
			}
		}
	}
</script>

<style lang="less">
 page{
	 background: #F6F7FB;
 }
 .boxSty{
	 .swiperBoxSty {
		 height: 600rpx;
		 position: relative;
		 .swiper {
			 height: 600rpx !important;
		 }
		 .swiperSty {
			 width: 100%;
			 height: 578rpx;
		 }
	 }
	 .infoBox {
		 width: 100%;
		 position: absolute;
		 margin-top: -260rpx;
	 }
	 .sendGoodSty {
		 width: 96%;
		 height: 400rpx;
		 flex-shrink: 0;
		 background: #fff;
		 margin: 0 auto;
		border-radius: 22rpx;
		.titlSty {
			height: 100rpx;
			background: linear-gradient(97deg, #3F9CFF 44.87%, #66D6E2 91.88%);
			display: flex;
			justify-content: flex-start;
			border-radius: 22rpx 22rpx 0 0;
			.activeSty {
				width: 50%;
				height: 100rpx;
				background: #fff;
				color: #278AFF !important;
				font-family: "PingFang SC";
				font-size: 32rpx;
				font-style: normal;
				font-weight: 600;
				line-height: 110rpx;
				text-align: center;
				// margin-top: -10rpx;
				border-radius: 22rpx 0 0 0;
			}
			.activeStySmall {
				width: 50%;
				height: 100rpx;
				background: #fff;
				color: #278AFF !important;
				font-family: "PingFang SC";
				font-size: 32rpx;
				font-style: normal;
				font-weight: 600;
				line-height: 110rpx;
				text-align: center;
				// margin-top: -10rpx;
				border-radius:  0 22rpx 0 0;
			}
			.title {
				width: 50%;
				height: 110rpx;
				color: #FFF;
				text-shadow: 1rpx 2rpx 4rpx rgba(0, 0, 0, 0.39);
				font-family: "PingFang SC";
				font-size: 28rpx;
				font-style: normal;
				font-weight: 600;
				line-height: 100rpx;
				text-align: center;
			}
			.lineSty {
				width: 80rpx;
				height: 8rpx;
				margin: 0 auto;
				margin-top: -20rpx;
				flex-shrink: 0;
				border-radius: 23rpx;
				background: linear-gradient(90deg, #0095FF 0%, #66D6E2 100%);
			}
			.bigRadius {
				image {
					width: 106rpx;
					height: 98rpx;
					position: absolute;
					
				}
			}
		}
		 .goodBtnSty {
			 display: flex;
			 justify-content: space-evenly;
			 .searchBtn {
				 width: 190rpx;
				 height: 90rpx;
				 flex-shrink: 0;
				 border-radius: 500rpx;
				 border: 1rpx solid #D8D8D8;
				 background: #FFF;
				 color: #8C8C8C;
				 font-family: "PingFang SC";
				 font-size: 28rpx;
				 font-style: normal;
				 font-weight: 400;
				 text-align: center;
				 line-height: 90rpx; /* 100% */
			 }
			 .sendBtn {
				 width: 428rpx;
				 height: 90rpx;
				 flex-shrink: 0;
				 border-radius: 500rpx;
				 background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
				 color: #FFF;
				 font-family: "PingFang SC";
				 font-size: 34rpx;
				 font-style: normal;
				 font-weight: 600;
				 text-align: center;
				 line-height: 90rpx; /* 100% */
			 }
		 }
		 
		 .cityBox {
			 width: 96%;
			 height: 90rpx;
			 display: flex;
			 justify-content: space-evenly;
			 margin-bottom: 36rpx;
			 .citySty {
				 width: 274rpx;
				 height: 100%;
				 border-bottom: 2rpx solid #F0F0F0;
				 color: #0E0E0E;
				 font-family: "PingFang SC";
				 font-size: 36rpx;
				 font-style: normal;
				 font-weight: 600;
			 }
			 image {
				 width: 60rpx;
				 height: 60rpx;
			 }
		 }
	 }
	 .memberCenter {
		 width: 96%;
		 height: 280rpx;
		border-radius: 22rpx;
		 background: linear-gradient(343deg, #FFF 18.41%, #FFF2DF 90.43%);
		// fill: linear-gradient(343deg, #FFF 18.41%, #FFF2DF 90.43%);
		// stroke-width: 1px;
		// stroke: #FFBD00;
		// filter: drop-shadow(0px 1px 20.5px rgba(205, 205, 205, 0.19));
		 .memberSty {
			 width: 94%;
			 height: 155rpx;
			 margin-left: 24rpx;
		 }
		 .showDiscounts {
			 display: flex;
			 justify-content: flex-start;
			 margin: 36rpx 10rpx 24rpx 24rpx;
			 .discountSy {
				 width: 200rpx;
				 height: 32rpx;
				 flex-shrink: 0;
				 border-radius: 30.302rpx;
				 border: 1.122rpx solid #FF9500;
				 background: #FFF;
				 margin-left: 10rpx;
				 margin-top: 5rpx;
				 display: flex;
				 .timeShow {
					 width: 100rpx;
					height: 32rpx;
					flex-shrink: 0;
					 background: linear-gradient(90deg, #FF9700 0%, #FFC821 100%);
					 color: #FFF;
					 font-family: "PingFang SC";
					 font-size: 18rpx;
					 font-style: normal;
					 font-weight: 500;
					 line-height: 28rpx;
					 padding-left: 14rpx;
					 border-radius: 10rpx 0 0 10rpx;
					 // margin-left: 4rpx;
				 }
				 p{
					 color: #7D0B00;
					 text-align: center;
					 font-family: "PingFang SC";
					 font-size: 18rpx;
					 font-style: normal;
					 font-weight: 400;
					 line-height: 28rpx;
					 margin-left: 8rpx;
				 }
			 }
		 }
		 .moreSty{
			 width: 138rpx;
			 height: 32rpx;
			 flex-shrink: 0;
			 border-radius: 500rpx;
			 background: #FFD79D;
			 color: #7D0A00;
			 text-align: center;
			 font-family: "PingFang SC";
			 font-size: 16rpx;
			 font-style: normal;
			 font-weight: 600;
			 line-height: 32rpx; /* 100% */
			 margin-right: 24rpx;
			 margin-top: 8rpx;
		 }
	 }
	
	.posti {
		position: relative;
	}
	.badgeSty {
		top: -12rpx;
		right: 0;
	}
	.toSeeSty {
		width: 96%;
		height: 238rpx;
		margin: 0 auto;
		flex-shrink: 0;
		background: #fff;
		display: flex;
		justify-content: space-evenly;
			border-radius: 22rpx;
		.seeBox {
			width: 338rpx;
			height: 222rpx;
			flex-shrink: 0;
			margin-top: 8rpx;
			border-radius: 22rpx;
			background: linear-gradient(180deg, rgba(193, 228, 255, 0.67) 0%, rgba(255, 255, 255, 0.67) 52.5%);
			.blackSty {
				color: #000;
				font-family: MiSans;
				font-size: 30rpx;
				font-style: normal;
				font-weight: 600;
				margin-left: 20rpx;
			}
			.blueSty {
				color: #278AFF;
				font-family: MiSans;
				font-size: 30rpx;
				font-style: normal;
				font-weight: 600;
			}
		}
		.darkSty {
			color: #8C8C8C;
			font-family: MiSans;
			font-size: 20rpx;
			font-style: normal;
			font-weight: 400;
			margin-left: 20rpx;
			margin-top: 15.8rpx;
		}
		.seeBtnSty {
			display: flex;
			justify-content: space-between;
			padding-left: 20rpx;
			padding-right: 34rpx;
			margin-top: 42rpx;
			.seeBtn {
				width: 92rpx;
				height: 40rpx;
				flex-shrink: 0;
				border-radius: 11rpx;
				background: rgba(2, 139, 255, 0.82);
				color: #FFF;
				text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.25);
				font-family: "PingFang SC";
				font-size: 20rpx;
				font-style: normal;
				font-weight: 500;
				text-align: center;
				line-height: 40rpx;
				margin-top: 10rpx;
			}
			.imgSty {
				width: 88rpx;
				height: 88rpx;
				flex-shrink: 0;
				margin-top: -15rpx;
			}
		}
	}
	.hotBox {
		width: 96%;
		// height: 200rpx;
		background-color: #fff;
		margin: 16rpx auto 47rpx;
		border-radius: 22rpx;
		.watchSty {
			position: relative;
		}
		.hotKind {
			color: #0E0E0E;
			font-family: "PingFang SC";
			font-size: 32rpx;
			font-style: normal;
			font-weight: 600;
			margin-top: 38rpx;
			margin-left: 24rpx;
			span{
				display: block;
				width: 54rpx;
				height: 6rpx;
				border-radius: 500rpx;
				background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
				margin: 12rpx auto;
			}
		}
			.ingSty {
				width: 110rpx;
				height: 28rpx;
				flex-shrink: 0;
				border-radius: 4rpx;
				background: #FF5E7F;
				color: #FFF;
				font-family: "PingFang SC";
				font-size: 18rpx;
				font-style: normal;
				font-weight: 600;
				line-height: 24rpx; /* 100% */
				text-align: center;
				margin-top: 21rpx;
			}
			.readySty {
				width: 56rpx;
				height: 28rpx;
				flex-shrink: 0;
				border-radius: 4rpx;
				background: #58A0FF;
				color: #FFF;
				font-family: "PingFang SC";
				font-size: 18rpx;
				font-style: normal;
				font-weight: 600;
				line-height: 22rpx; /* 100% */
				text-align: center;
				margin-top: 21rpx;
			}
			.readybegin {
				position: absolute;
				bottom: 38rpx;
				right: 24rpx;
				width: 159rpx;
				height: 40rpx;
				flex-shrink: 0;
				border-radius: 500rpx;
				background: #D8D8D8;
				color: #FFF;
				font-family: "PingFang SC";
				font-size: 20rpx;
				font-style: normal;
				font-weight: 500;
				line-height: 40rpx; /* 100% */
				text-align: center;
			}
		.allKind {
			color: #535353;
			font-family: "PingFang SC";
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			// margin-top: 20rpx;
			margin-right: 24rpx;
		}
		.goSty {
			display: flex;
			justify-content: center;
			position: absolute;
			bottom: 0;
			right: 24rpx;
			width: 159rpx;
			height: 40rpx;
			flex-shrink: 0;
			border-radius: 500rpx;
			background: linear-gradient(90deg, #FB517A 0%, #FF5264 51%, #FF4740 100%);
			color: #FFF;
			font-family: "PingFang SC";
			font-size: 20rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 40rpx; /* 100% */
		}
	}
	.cardListBox {
		// width: 96%;
		display: flex;
		justify-content: space-evenly;
	}
	.cardSty {
		// margin-top: 27rpx;
		color: #535353;
		font-family: "PingFang SC";
		font-size: 26rpx;
		font-style: normal;
		line-height: 26rpx; /* 100% */
	}
	.activeCard {
		color: #0E0E0E;
		font-family: "PingFang SC";
		font-size: 32rpx;
		font-style: normal;
		font-weight: 600;
		line-height: 32rpx; /* 100% */
	}
	.ativeLine {
		width: 54rpx;
		height: 6rpx;
		flex-shrink: 0;
		border-radius: 500rpx;
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		margin: 12rpx auto;
	}
	.tabbarSty {
		/deep/ .u-icon__icon {
			font-size: 40rpx !important;
		}
	}
 }
 .content-inner{
 	width: 96%;
 	height: 100%;
 	margin: 0 auto;
 	margin-top: 18rpx;
 	border-radius: 26rpx;
 	background-color: #fff;
 	overflow: hidden;
	.lineCardSty {
		width: 96%;
		height: 2rpx;
		background: rgba(0, 0, 0, 0.06);
		margin: 18rpx auto;
	}
	.btnBottomSty {
		width: 166rpx;
		height: 60rpx;
		flex-shrink: 0;
		border-radius: 52rpx;
		border: 2rpx solid #E2E2E2;
		background: #FFF;
		color: #0E0E0E;
		font-family: "PingFang SC";
		font-size: 22rpx;
		font-style: normal;
		font-weight: 400;
		text-align: center;
		line-height: 60rpx; /* 100% */
	}
 	.content-info{
 		width: 95%;
 		padding-left: 0;
 		margin-top:15rpx;
 		margin: 15rpx auto;
 		.info-title{
 			color: #8C8C8C;
 			font-family: "PingFang SC";
 			font-size: 20rpx;
 			font-style: normal;
 			font-weight: 400;
 			}
 		.info-content{
 			color: #0E0E0E;
 			font-family: "PingFang SC";
 			font-size: 20rpx;
 			font-style: normal;
 			font-weight: 600;
			margin-left: 20rpx;
 		}
 		.info {
 			display: flex;
 			justify-content: space-between;
 			margin-top: 24rpx;
 			.logo{
 				width: 44rpx;
 				height: 44rpx;
 				margin-left: 20rpx;
 				margin-top: 0;
 				vertical-align: middle;
 			}
 			.info-title{
 				color: #535353;
 				font-size: 26rpx;
 				font-weight: 400;
 				}
 			.info-content{
 				color: #333333;
 				font-weight: 600;
 				font-size: 26rpx;
 			}
 			.info-moeny{
 				color: #F53F3F;
 				font-weight: 600;
 				font-size: 28rpx;
 			}
 		}
 	}
 }
 .content-top{
 	width: 97%;
 	min-height: 170rpx;
 	border-radius: 18rpx;
 	background-color: #EDFAFF;
 	margin: 0 auto;
 	// margin-top: 16rpx;
 }
 .content-time{
 	display: flex;
 	justify-content: space-between;
 	margin-left: 10px;
 	margin-right: 10px;
 	
 	.time{
 		color: #535353;
 		font-size: 22rpx;
 		margin-top: 25rpx;
 	}
 	.kind{
 		margin-top: 25rpx;
 		color: #0E0E0E;
 		font-family: "PingFang SC";
 		font-size: 22rpx;
 		font-style: normal;
 		font-weight: 600;
 	}
 }
 .colorSty {
 	margin: 30rpx 16rpx 20rpx 16rpx;
	padding-top: 44rpx;
 	padding-bottom: 20rpx;
 	
 	.time{
 		color: #666666;
 		font-size: 22rpx;
 		margin-left: 6rpx;
 	}
 	.kind{
 		color: #666666;
 		font-size: 22rpx;
 		margin-left: 6rpx;
 	}
 	
 	.boxSty{
 		border-radius: 0 0 40rpx 40rpx;
 	}
 	.address{
 		width: 250rpx;
 		font-size: 22rpx;
 		color:#666;
 		display: flex;
 		align-items: flex-start;
 		justify-content: center;
 		.ico{
 			flex-shrink: 0;
 			width: 28rpx;
 			height: 28rpx;
 			margin-right: 6rpx;
 			margin-top: 6rpx;
 		}
 	}
 	.line{
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		flex-direction: column;
 		.text{
 			color: #278AFF;
 			font-size: 26rpx;
 			font-weight: 500;
 			line-height: 28rpx;
 			// margin-top: 20rpx;
 		}
 		.ico{
 			width: 114rpx;
 		}
 	}
 	.route-item {
 		width: 276rpx;
 		align-items: flex-start;
 		justify-content: center;
 		font-size: 36rpx;
 		font-weight: bold;
 		color: #0E0E0E;
 	}
 	
 }
 
</style>
